<template>
  <div class="app-container">
    <!-- 搜索区域：调整间距与对齐 -->
    <el-form 
      :model="queryParams" 
      ref="queryRef" 
      :inline="true" 
      label-width="100px" 
      class="search-form"
    >
      <el-form-item label="老人姓名" prop="elderlyName">
        <el-input
          v-model="queryParams.elderlyName"
          placeholder="请输入老人姓名"
          clearable
          @keyup.enter="handleQuery"
          class="input-with-margin"
        />
      </el-form-item>
      <el-form-item label="请假开始时间" prop="leaveStartTime">
        <el-date-picker 
          clearable
          v-model="queryParams.leaveStartTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择请假开始时间"
          class="input-with-margin"
        />
      </el-form-item>
      <el-form-item>
        <el-button 
          type="primary" 
          icon="Search" 
          @click="handleQuery"
          class="btn-with-margin"
        >搜索</el-button>
        <el-button 
          icon="Refresh" 
          @click="resetQuery"
          class="btn-with-margin"
        >重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 状态筛选标签 + 发起请假申请按钮（同一行） -->
    <div class="filter-and-action-container">
      <!-- 请假状态筛选标签 -->
      <div class="status-filter-tags">
        <el-tag
          :type="currentFilter === '' ? 'primary' : ''"
          :effect="currentFilter === '' ? 'dark' : 'plain'"
          @click="handleStatusFilter('')"
          class="status-tag"
        >全部</el-tag>
        <el-tag
          :type="currentFilter === '2' ? 'primary' : ''"
          :effect="currentFilter === '2' ? 'dark' : 'plain'"
          @click="handleStatusFilter('2')"
          class="status-tag"
        >请假中</el-tag>
        <el-tag
          :type="currentFilter === '0' ? 'primary' : ''"
          :effect="currentFilter === '0' ? 'dark' : 'plain'"
          @click="handleStatusFilter('0')"
          class="status-tag"
        >超时未归</el-tag>
        <el-tag
          :type="currentFilter === '1' ? 'primary' : ''"
          :effect="currentFilter === '1' ? 'dark' : 'plain'"
          @click="handleStatusFilter('1')"
          class="status-tag"
        >已返回</el-tag>
        <el-tag
          :type="currentFilter === '3' ? 'primary' : ''"
          :effect="currentFilter === '3' ? 'dark' : 'plain'"
          @click="handleStatusFilter('3')"
          class="status-tag"
        >审批中</el-tag>
      </div>
      
      <!-- 发起请假申请按钮（放在最右边） -->
      <div class="action-button">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="tosq"
          v-hasPermi="['system:request:add']"
          class="add-request-btn"
        >发起请假申请</el-button>
      </div>
    </div>

    <!-- 表格区域：保持原有逻辑，优化列宽与对齐 -->
    <el-table 
      v-loading="loading" 
      :data="requestList" 
      @selection-change="handleSelectionChange"
      border 
      stripe 
      class="custom-table"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键ID" align="center" prop="id" width="80" />
      <el-table-column label="单据编号" align="center" prop="extraField1" width="120" />
      <el-table-column label="老人姓名" align="center" prop="elderly.name" width="120" />
      <el-table-column label="请假开始时间" align="center" prop="leaveStartTime" width="160">
        <template #default="scope">
          <span>{{ parseTime(scope.row.leaveStartTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预请假结束时间" align="center" prop="expectedEndTime" width="160">
        <template #default="scope">
          <span>{{ parseTime(scope.row.expectedEndTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实际结束时间" align="center" prop="actualEndTime" width="160">
        <template #default="scope">
          <span>{{ parseTime(scope.row.actualEndTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="sysUser.userName" width="120" />
      <el-table-column label="请假状态" align="center" prop="leaveStatus" width="120">
        <template #default="scope">
          <dict-tag :options="lekang_leave_status" :value="scope.row.leaveStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template #default="scope">
          <!-- 查看按钮 -->
          <el-button 
            link 
            type="primary" 
            icon="View" 
            @click="handleView(scope.row)" 
            v-hasPermi="['system:request:view']"
          >查看</el-button>
          
          <!-- 修改按钮 -->
          <el-button 
            link 
            type="primary" 
            icon="Edit" 
            @click="handleUpdate(scope.row)" 
            v-hasPermi="['system:request:edit']"
          >修改</el-button>
          
          <!-- 返回按钮 -->
          <el-button 
            link 
            type="success" 
            icon="Check" 
            @click="handleReturn(scope.row)" 
            :disabled="scope.row.leaveStatus === '1'"
            v-hasPermi="['system:request:return']"
            :class="{'disabled-btn': scope.row.leaveStatus === '1'}"
          >返回</el-button>
          
          <!-- 删除按钮 -->
          <!-- <el-button 
            link 
            type="danger" 
            icon="Delete" 
            @click="handleDelete(scope.row)" 
            v-hasPermi="['system:request:remove']"
          >删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页区域：保持原有逻辑 -->
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加/修改弹窗 -->
    <el-dialog 
      :title="title" 
      v-model="open" 
      width="500px" 
      append-to-body
    >
      <el-form 
        ref="requestRef" 
        :model="form" 
        :rules="rules" 
        label-width="80px"
      >
        <!-- <el-form-item label="老人外键" prop="elderlyId">
          <el-input v-model="form.elderlyId" placeholder="请输入老人外键" />
        </el-form-item> -->
        <!-- 新代码（添加） -->
<el-form-item label="老人姓名" prop="elderlyId">
  <el-select
    v-model="form.elderlyId"
    placeholder="请选择老人"
    clearable
    filterable
    remote
    :remote-method="handleSearchElderly"  
    :loading="elderlyLoading"            
  >
    <el-option
      v-for="elderly in elderlyList"
      :key="elderly.id"
      :label="elderly.name"  
      :value="elderly.id"    
    />
  </el-select>
</el-form-item>
        <el-form-item label="开始时间" prop="leaveStartTime">
          <el-date-picker 
            clearable
            v-model="form.leaveStartTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择请假开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="expectedEndTime">
          <el-date-picker 
            clearable
            v-model="form.expectedEndTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择预请假结束时间"
          />
        </el-form-item>
        <el-form-item label="实际结束时间" prop="actualEndTime">
          <el-date-picker 
            clearable
            v-model="form.actualEndTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择实际结束时间"
          />
        </el-form-item>
        <el-form-item label="请假天数" prop="actualLeaveDays">
          <el-input v-model="form.actualLeaveDays" placeholder="请输入实际请假天数" />
        </el-form-item>
        <el-form-item label="返回备注" prop="actualReturnRemark">
          <el-input v-model="form.actualReturnRemark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="创建人" prop="creator">
          <el-input v-model="form.creator" placeholder="请输入创建人" />
        </el-form-item>
        <el-form-item label="请假状态" prop="leaveStatus">
          <el-radio-group v-model="form.leaveStatus">
            <el-radio
              v-for="dict in lekang_leave_status"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="陪同人姓名" prop="companionName">
          <el-input v-model="form.companionName" placeholder="请输入陪同人姓名" />
        </el-form-item>
        <el-form-item label="陪同人电话" prop="companionPhone">
          <el-input v-model="form.companionPhone" placeholder="请输入陪同人电话" />
        </el-form-item>
        <el-form-item label="预请假天数" prop="expectedLeaveDays">
          <el-input v-model="form.expectedLeaveDays" placeholder="请输入预请假天数" />
        </el-form-item>
        <el-form-item label="请假理由" prop="leaveReason">
          <el-input v-model="form.leaveReason" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="业务ID" prop="businessId">
          <el-input v-model="form.businessId" placeholder="请输入业务ID" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看详情弹窗 -->
    <el-dialog 
      title="请假申请详情" 
      v-model="viewOpen" 
      width="600px" 
      append-to-body
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="老人姓名">{{ viewForm.elderly?.name }}</el-descriptions-item>
        <el-descriptions-item label="老人外键编号">{{ viewForm.elderlyId }}</el-descriptions-item>
        <el-descriptions-item label="请假开始时间">{{ parseTime(viewForm.leaveStartTime) }}</el-descriptions-item>
        <el-descriptions-item label="预请假结束时间">{{ parseTime(viewForm.expectedEndTime) }}</el-descriptions-item>
        <el-descriptions-item label="实际结束时间">{{ parseTime(viewForm.actualEndTime) }}</el-descriptions-item>
        <el-descriptions-item label="实际请假天数">{{ viewForm.actualLeaveDays }}</el-descriptions-item>
        <el-descriptions-item label="请假状态">
          <dict-tag :options="lekang_leave_status" :value="viewForm.leaveStatus"/>
        </el-descriptions-item>
        <el-descriptions-item label="创建人">{{ viewForm.creator }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ parseTime(viewForm.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="陪同人姓名">{{ viewForm.companionName }}</el-descriptions-item>
        <el-descriptions-item label="陪同人电话">{{ viewForm.companionPhone }}</el-descriptions-item>
        <el-descriptions-item label="预请假天数">{{ viewForm.expectedLeaveDays }}</el-descriptions-item>
        <el-descriptions-item label="请假理由" :span="2">{{ viewForm.leaveReason }}</el-descriptions-item>
        <el-descriptions-item label="实际返回备注" :span="2">{{ viewForm.actualReturnRemark }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="viewOpen = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 返回确认弹窗 -->
    <el-dialog 
      title="填写返回时间" 
      v-model="returnOpen" 
      width="500px" 
      append-to-body
    >
      <el-form 
        ref="returnFormRef" 
        :model="returnForm" 
        :rules="returnRules" 
        label-width="120px"
      >
        <el-form-item label="实际返回时间" prop="actualEndTime">
          <el-date-picker 
            v-model="returnForm.actualEndTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择实际返回时间"
            style="width: 100%"
            :disabled-date="disabledReturnDate"
            @change="calculateActualLeaveDays"
          />
        </el-form-item>
        <el-form-item label="实际请假天数" prop="actualLeaveDays">
          <el-input v-model="returnForm.actualLeaveDays" placeholder="系统自动计算" readonly />
        </el-form-item>
        <el-form-item label="备注" prop="actualReturnRemark">
          <el-input 
            v-model="returnForm.actualReturnRemark" 
            type="textarea" 
            placeholder="请输入备注信息" 
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitReturn">确 定</el-button>
          <el-button @click="returnOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Request">
// 2. 修改script部分，添加导入和修改数据结构
import { listRequest, getRequest, delRequest, addRequest, updateRequest } from "@/api/system/request"
import { listElderly } from "@/api/system/elderly" // 导入老人列表API
import { useRouter } from 'vue-router'

const router = useRouter()
const { proxy } = getCurrentInstance()
const { lekang_leave_status } = proxy.useDict('lekang_leave_status')

const requestList = ref([])
const open = ref(false)
const viewOpen = ref(false)
const returnOpen = ref(false)
const loading = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const currentFilter = ref("") // 当前选中的筛选状态，空字符串表示"全部"

// 查看详情表单
const viewForm = ref({})
// 返回表单
const returnForm = ref({})
const returnFormRef = ref()

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    elderlyId: null, // 保留此字段用于实际查询
    elderlyName: null, // 新增此字段用于输入姓名
    leaveStartTime: null,
    leaveStatus: null // 请假状态筛选参数
  },
  rules: {
    createTime: [
      { required: true, message: "创建时间不能为空", trigger: "blur" }
    ],
    elderlyId: [
    { required: true, message: "请选择老人", trigger: "blur" }
  ],
  },
  returnRules: {
    actualEndTime: [
      { required: true, message: "实际返回时间不能为空", trigger: "change" }
    ]
  }
})
const elderlyList = ref([]); // 老人列表（用于选择器）
const elderlyLoading = ref(false); // 搜索加载状态
// 远程搜索老人（根据姓名模糊查询）
const handleSearchElderly = (query) => {
  if (!query) {
    elderlyList.value = [];
    return;
  }
  elderlyLoading.value = true;
  // 调用后端“查询老人列表”接口（假设接口为listElderly）
  listElderly({ name: query, pageNum: 1, pageSize: 20 }).then(response => {
    elderlyList.value = response.rows || []; // 后端返回的老人列表（包含id和name）
    elderlyLoading.value = false;
  }).catch(() => {
    elderlyList.value = [];
    elderlyLoading.value = false;
  });
};





const tosq =()=>{
  router.push({path:'/xtgz/xtgz/sq'})
}
const { queryParams, form, rules } = toRefs(data)

/** 查询请假列表 */
async function getList() {
  loading.value = true
  
  // 根据当前筛选状态设置请假状态参数
  if (currentFilter.value) {
    queryParams.value.leaveStatus = currentFilter.value
  } else {
    queryParams.value.leaveStatus = null
  }
  
  // 先处理老人姓名搜索
  if (queryParams.value.elderlyName) {
    try {
      // 通过姓名查询老人信息
      const elderlyResponse = await listElderly({
        name: queryParams.value.elderlyName,
        pageNum: 1,
        pageSize: 100
      })
      
      if (elderlyResponse.rows && elderlyResponse.rows.length > 0) {
        queryParams.value.elderlyId = elderlyResponse.rows[0].id
      } else {
        queryParams.value.elderlyId = null
      }
    } catch (error) {
      console.error('查询老人信息失败', error)
      queryParams.value.elderlyId = null
    }
  } else {
    queryParams.value.elderlyId = null
  }
  
  // 执行请假列表查询
  listRequest(queryParams.value).then(response => {
    requestList.value = response.rows || [] // 增加空数组默认值，避免渲染错误
    total.value = response.total || 0
    loading.value = false
  }).catch(error => {
    console.error('查询请假列表失败', error)
    requestList.value = []
    total.value = 0
    loading.value = false
    if (proxy && proxy.$modal) {
      proxy.$modal.msgError("获取数据失败，请重试")
    }
  })
}

/** 状态筛选标签点击操作 */
function handleStatusFilter(status) {
  currentFilter.value = status
  queryParams.value.pageNum = 1 // 重置为第一页
  getList() // 重新查询列表
}

/** 查看按钮操作 */
function handleView(row) {
  // 修改为跳转到详情页面，带上请假记录ID作为参数
  router.push({ path: '/system/leave/detail', query: { id: row.id } })
}

/** 返回按钮操作 */
function handleReturn(row) {
  if (row.leaveStatus === '1') {
    proxy.$modal.msgWarning("该请假记录已返回，无需重复操作")
    return
  }
  
  getRequest(row.id).then(response => {
    returnForm.value = {
      id: row.id,
      actualEndTime: new Date(), // 默认当前时间
      actualLeaveDays: 0,
      actualReturnRemark: '',
      leaveStartTime: response.data.leaveStartTime
    }
    // 打开弹窗时自动计算一次
    calculateActualLeaveDays()
    returnOpen.value = true
  })
}

/** 禁用早于请假开始时间的日期 */
function disabledReturnDate(time) {
  if (!returnForm.value.leaveStartTime) return false
  return time.getTime() < new Date(returnForm.value.leaveStartTime).getTime()
}

/** 计算实际请假天数 */
function calculateActualLeaveDays() {
  if (!returnForm.value.actualEndTime || !returnForm.value.leaveStartTime) {
    returnForm.value.actualLeaveDays = 0
    return
  }
  
  const startTime = new Date(returnForm.value.leaveStartTime).getTime()
  const endTime = new Date(returnForm.value.actualEndTime).getTime()
  
  // 检查返回时间是否早于开始时间
  if (endTime < startTime) {
    proxy.$modal.msgWarning("实际返回时间不能早于请假开始时间")
    returnForm.value.actualLeaveDays = 0
    return
  }
  
  const diffTime = endTime - startTime
  const diffDays = diffTime / (1000 * 60 * 60 * 24)
  
  // 根据规则计算请假天数
  let calculatedDays = 0
  
  if (diffDays < 0.5) {
    // 小于0.5天按0.5天计算
    calculatedDays = 0.5
  } else if (diffDays >= 0.5 && diffDays < 1) {
    // 0.5天到1天按1天计算
    calculatedDays = 1
  } else if (diffDays >= 1 && diffDays < 1.5) {
    // 1天到1.5天按1.5天计算
    calculatedDays = 1.5
  } else if (diffDays >= 1.5 && diffDays < 2) {
    // 1.5天到2天按2天计算
    calculatedDays = 2
  } else {
    // 大于等于2天按四舍五入到0.5天计算
    calculatedDays = Math.round(diffDays * 2) / 2
  }
  
  returnForm.value.actualLeaveDays = calculatedDays
}

/** 提交返回信息 */
function submitReturn() {
  returnFormRef.value.validate(valid => {
    if (valid) {
      // 提交前再次计算确保数据准确
      calculateActualLeaveDays()
      
      // 更新请假状态为已返回
      const submitData = {
        id: returnForm.value.id,
        actualEndTime: returnForm.value.actualEndTime,
        actualLeaveDays: returnForm.value.actualLeaveDays,
        actualReturnRemark: returnForm.value.actualReturnRemark,
        leaveStatus: '1' // 已返回
      }
      
      updateRequest(submitData).then(response => {
        proxy.$modal.msgSuccess("返回成功")
        returnOpen.value = false
        getList()
      })
    }
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    elderlyId: null,
    leaveStartTime: null,
    expectedEndTime: null,
    actualEndTime: null,
    actualLeaveDays: null,
    actualReturnRemark: null,
    createTime: null,
    creator: null,
    leaveStatus: null,
    companionType: null,
    companionName: null,
    companionPhone: null,
    expectedLeaveDays: null,
    leaveReason: null,
    businessId: null,
    extraField1: null,
    extraField2: null
  }
  proxy.resetForm("requestRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  currentFilter.value = "" // 重置筛选状态
  if (proxy && proxy.resetForm) {
    proxy.resetForm("queryRef")
  }
  // 重置时确保清空elderlyId和leaveStatus
  queryParams.value.elderlyId = null
  queryParams.value.leaveStatus = null
  queryParams.value.pageNum = 1
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "发起请假申请"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _id = row.id || ids.value
  getRequest(_id).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改请假"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["requestRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateRequest(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addRequest(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除请假编号为"' + _ids + '"的数据项？').then(function() {
    return delRequest(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

getList()
</script>

<style scoped>
/* 搜索区域：输入框与按钮间距 */
.input-with-margin {
  margin-right: 8px;
}
.btn-with-margin {
  margin-right: 8px;
}
.search-form {
  margin-bottom: 16px;
}

/* 操作按钮区域：统一间距 */
.operation-buttons {
  margin-bottom: 16px;
}

/* 表格区域： hover 高亮与边框优化 */
.custom-table {
  margin-bottom: 16px;
}
.custom-table tr:hover {
  background-color: #f5f7fa;
}
.filter-and-action-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
}

/* 状态筛选标签样式 */
.status-filter-tags {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-tag {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.status-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 操作按钮区域 */
.action-button {
  display: flex;
  align-items: center;
}

.add-request-btn {
  padding: 8px 16px;
  font-size: 14px;
}

/* 返回按钮禁用样式 */
.disabled-btn {
  color: #c0c4cc !important;
  cursor: not-allowed !important;
}

/* 优化状态标签样式 */
.status-tag {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  margin-right: 12px;
  border: 1px solid #dcdfe6;
  background-color: transparent;
}

.status-tag:last-child {
  margin-right: 0;
}

.status-tag:hover:not(.el-tag--dark) {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

/* 确保选中状态的样式正确应用 */
.el-tag--primary.el-tag--dark {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}

/* 优化筛选容器布局 */
.filter-and-action-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
  flex-wrap: wrap;
  gap: 12px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .filter-and-action-container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .status-filter-tags {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .action-button {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>